JSON数据格式
JSON是什么
- JSON是一种轻量级的数据交换格式
- JSON文件时独立的,扩展名是".json"该文件中允许保存JSON格式的数据
- 注意: 在JSON文件中字符串必须是双引号( " " )
示例代码:
{
"动画片" : [
{
"数码宝贝" : [
"亚古兽", "加鲁鲁兽"
],
"大头儿子小头爸爸" : [
"围裙妈妈", "隔壁王叔叔"
]
}
],
"漫威" : [
{
"复仇者联盟" : [
"绿巨人", "奇异博士"
],
"正义联盟" : [
"超人", "海王"
]
}
]
}JavaScript中的JSON
- JSON是基于JavaScript语法,但与之不同的是JavaScript不是JSON,JSON也不是JavaScript
-
JavaScript类型:
- 对象和数组
- 数值
- 字符串
-
JSON的不同点:
- 属性名称必须是双引号括起来的字符串,最后一个属性后不能有逗号
- 禁止出现前导零 - 比如"01,02,03等等"
- 只有有限的一些字符可能被转义
示例代码:
<body>
<script>
// JSON字符串 - 数据格式符合JSON格式的要求，类型是字符串类型
var jsonString = '{"name" : "皮卡丘"}';
// JSON对象 - JSON数据格式在JavaScript中的具体表现(对象和数组)
var jsonObject = {
name : '皮卡丘'
};
var jsonArr = [1,2,3,4];
</script>
</body>JSON字符串与JSON对象
示例代码:
<script src="js/json2.js"></script>
</head>
<body>
<script>
// JSON字符串
var jsonString = '{"name" : "皮卡丘"}';
var jsonObject = JSON.parse(jsonString);
console.log(jsonObject);
var jsonResult = JSON.stringify(jsonObject);
console.log(jsonResult);
</script>
</body>Ajax中的JSON
示例代码:
<body>
<button id="btn">请求</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
// 1.接收数据 - JSON数据格式，是字符串类型
var data = xhr.responseText;
// 2.将符合JSON格式的字符串类型数据进行转换
var json = JSON.parse(data);
// 3.进行具体处理
console.log(json);
}
}
// 请求数据格式 - user=zhangwuji&pwd=12345
xhr.open('post','server.json');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var obj = {
name : '哪吒',
age : 26
}
/*var jsonString = JSON.stringify(obj);
console.log(jsonString);// {"name":"哪吒","age":26}*/
// 将JSON字符串转换成符合请求数据的格式
xhr.send('name=' + obj.name + '&age=' + obj.age);
});
</script>
</body>Ajax中的XML
示例代码:
<body>
<button id="btn">请求</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
// 1.接收数据 - responseXML属性 -> 接收XML数据格式
var data = xhr.responseXML;
// 2.利用DOM解析XML即可
var nameElement = data.getElementsByTagName('name')[0];
console.log(nameElement.textContent);
}
}
xhr.open('post','server.xml');
xhr.send(null);
});
</script>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。